<template>
	<view class="uni-container uni-padding-wrap">
		<navBar></navBar>
		<view class="content">
			<view class="main">
				<match-media :min-width="MAX_SIZEiZE">
					<view class="title">{{ $t('Page.user.wdqb') }}</view>
				</match-media>
				<view class="tabsBox">
					<waves :class="['tab_item', tabCurrent == index ? 'tab_active' : '']"
						v-for="(item, index) in tabList" @onTap="changeTab(item, index)" :key="'tab' + index">
						<uni-icons custom-prefix="iconfont" :type="item.icon" size="25"
							:color="tabCurrent == index ? '#fff' : '#adadc2'"></uni-icons>
						<text class="tab_text">{{ item.name }}</text>
					</waves>
				</view>
				<view class="wallet-cmp">
					<component :ref="currentComponent" :is="currentComponent" :key="componentKey"></component>
				</view>
			</view>
		</view>
		<Footer></Footer>
		<match-media :max-width="MAX_SIZEiZE">
			<view class="tabbar">
				<tabBar :showselected="true"></tabBar>
			</view>
		</match-media>
	</view>
</template>

<script>
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import Footer from '@/components/footer/footer.vue'
	import Deposit from './components/deposit.vue'
	import Widthdraw from './components/withdraw.vue'
	import WalletCenter from './components/walletCenter.vue'
	import Award from './components/award.vue'
	export default {
		components: {
			Footer,
			Deposit,
			Widthdraw,
			WalletCenter,
			Award
		},
		data() {
			return {
				MAX_SIZEiZE,
				tabList: [{
					icon: 'icon-deposit',
					name: this.$t('Page.user.ck')
				}, {
					icon: 'icon-withdraw',
					name: this.$t('Page.user.tq')
				}, {
					icon: 'icon-account',
					name: this.$t('Page.user.qbzx')
				}, {
					icon: 'icon-jiangli',
					name: this.$t('Page.user.jl')
				}],
				tabCurrent: 0,
				currentComponent: 'Deposit',
				componentKey: 0
			}
		},
		onLoad(option) {
			console.log("option: ", option);
			if (option.index) {
				const cmpObj = {
					0: 'Deposit',
					1: 'Widthdraw',
					2: 'WalletCenter',
					3: 'Award'
				}
				this.tabCurrent = +option.index;
				this.currentComponent = cmpObj[this.tabCurrent]
			}
		},
		onShow() {
			try {
				console.log(Boolean(this.$refs[this.currentComponent]))
				this.$refs[this.currentComponent] && this.$refs[this.currentComponent].onComponentShow()
			} catch (e) {}
		},
		methods: {
			changeTab(item, index) {
				console.log("item,index: ", item, index);
				this.tabCurrent = index;
				// 切换子组件 
				const cmpObj = {
					0: 'Deposit',
					1: 'Widthdraw',
					2: 'WalletCenter',
					3: 'Award'
				}
				this.currentComponent = cmpObj[index]
				// 更新 key 值，强制重新渲染子组件
				this.componentKey++
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-container {
		min-height: 100vh;
		background: #20262d;
		padding: 66px 0px 0;
		padding-top: calc(var(--status-bar-height) + 66px);
		position: relative;
		overflow-y: auto;

		.content {
			margin: 0 auto;
			max-width: 1200px;
			padding: 32px;
			overflow-y: auto;

			.main {
				max-width: 752px;

				.title {
					font-size: 16px;
					font-weight: 700;
					color: #fff;
				}

				.tabsBox {
					background-color: #191e24;
					vertical-align: middle;
					display: flex;
					flex-wrap: nowrap;
					margin-top: 16px;
					border-radius: 12px;

					.tab_item {
						flex: 1;
						border-radius: inherit;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						min-height: 80px;
						cursor: pointer;
						padding: 8px 0px;

						.tab_text {
							color: #adadc2;
							margin-left: 5px;
							font-size: 14px;
							white-space: nowrap;
							/* 不换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
						}
					}

					.tab_active {
						background: #2b333b;

						.tab_text {
							color: #fff;
						}
					}
				}

				.wallet-cmp {
					border-radius: 16px;
					background: #242a32;
					margin: 16px auto 32px;
					display: flex;
					padding-top: 16px;
					padding-bottom: 16px;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;
				}
			}
		}
	}

	@media screen and (max-width: 768px) {
		.tabsBox {
			margin: 16px 15px 0;
		}

		.uni-container {
			padding: 50px 0px 50px;
			padding-top: calc(var(--status-bar-height) + 50px);

			.content {
				padding: 0;
			}

			.chargeAmount {
				width: 33.333% !important;

				&:nth-child(4n) {
					padding-right: 16px !important;
				}

				&:nth-child(3n) {
					padding-right: 0 !important;
				}

			}

			/* height:auto; */
			/* height: calc(100vh - 110px); */
		}
	}

	@keyframes roli_rotate {
		0% {
			transform: rotateZ(0deg)
		}

		to {
			transform: rotateZ(360deg)
		}
	}
</style>